<template>
  <div class="tag-list" :style="{ left: $store.state.asideMenu.width }">
    <!-- type="card" @edit="handleTabsEdit" -->
    <el-tabs
      v-model="activeTab"
      class="demo-tabs"
      type="card"
      @tab-remove="removeTab"
      @tab-change="changeTab"
    >
      <el-tab-pane
        v-for="item in tagList"
        :key="item.path"
        :label="item.title"
        :name="item.path"
        :closable="item.path !== '/'"
      >
      </el-tab-pane>
    </el-tabs>

    <el-dropdown class="tag-btn" @command="handleClose">
      <span class="el-dropdown-link">
        <el-icon>
          <arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="clearOther">关闭其他</el-dropdown-item>
          <el-dropdown-item command="clearAll">关闭全部</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
  <div style="height: 44px"></div>
</template>

<script setup>
import { ref } from "vue";
import { useRoute, onBeforeRouteUpdate } from "vue-router";
import { constant } from "~/utils/globalv";
import { setCache, getCache } from "~/composables/localStorage";
import { router } from "~/router";
import { getBrotherInObjArray8Val } from "~/utils/arrayUtils";

const routes = useRoute();
const activeTab = ref(routes.fullPath);
const tagList = ref([
  {
    title: "后台首页",
    name: "1",
    path: "/",
  },
]);

function addTab(tab) {
  const targetTab = tagList.value.find((item) => item.path === tab.path);
  if (!targetTab) {
    tagList.value.push(tab);
  }
  setCache(constant.tabList, tagList.value);
}

onBeforeRouteUpdate((to, from) => {
  activeTab.value = to.path;
  addTab({ title: to.meta.title, path: to.path });
});

const changeTab = (path) => {
  router.push(path);
};

function initTabList() {
  const tabList = getCache(constant.tabList);
  if (tabList && tabList.length > 0) tagList.value = tabList;
}

initTabList();

// 如果关闭的是当前选中的 tag 则自动切换到下一个 tag
const removeTab = (path) => {
  if (activeTab.value === path) {
    // 关闭了当前显示的 tag
    const tag = getBrotherInObjArray8Val(
      tagList.value,
      activeTab.value,
      "path"
    );

    // 跳转路由
    if (tag) {
      activeTab.value = tag.path;
    }
  }

  // 删除缓存数据并应用到前台
  const newTagList = tagList.value.filter((item) => item.path !== path);
  setCache(constant.tabList, newTagList);
  tagList.value = newTagList;
};

const handleClose = (command) => {
  if (command === "clearAll") clearAllTab();
  switch (command) {
    case "clearAll":
      clearAllTab();
      break;
    case "clearOther":
      clearOtherTab();
      break;
  }
};

const clearAllTab = () => {
  // 删除其他所有标签
  tagList.value = tagList.value.filter((item) => item.path === "/");
  setCache(constant.tabList, tagList.value);
  // 切换路由到概览
  activeTab.value = "/";
};

const clearOtherTab = (currentPath) => {
  tagList.value = tagList.value.filter(
    (item) => item.path === "/" || item.path === activeTab.value
  );
  console.log("关闭其他结果路由：", tagList.value);
  setCache(constant.tabList, tagList.value);
};
</script>
<style scoped>
.tag-list {
  @apply fixed bg-gray-100 flex items-center px-2;
  top: 64px;
  right: 0;
  height: 44px;
  z-index: 100;
}

.tag-btn {
  @apply bg-white rounded ml-auto flex items-center justify-center px-2;
  height: 32px;
  width: 32px;
}

:deep(.el-tabs__header) {
  border: 0 !important;
  @apply mb-0;
}

:deep(.el-tabs__nav) {
  border: 0 !important;
}

:deep(.el-tabs__item) {
  border: 0 !important;
  height: 32px;
  line-height: 32px;
  @apply bg-white mx-1 rounded mt-1;
}
</style>
